/* eslint-disable import/extensions */
<template>
  <div class="content">
    <!-- <Button
      v-if="!value"
      @click="onUploadClick"
      type="primary">上传视频</Button> -->
    <img
      @click="onUploadClick"
      class="add"
      v-if="!values"
      src="@/assets/images/ic_add_pic.png"
    />
    <video
      width="148px"
      height="148px"
      id="videoPlayer"
      controls
      ref="video"
      v-if="values"
      :src="domain + values"
    />
    <img
      class="close"
      v-if="values"
      src="@/assets/images/ic_del.png"
      @click="onDeleted()"
    />
    <input
      ref="input"
      type="file"
      style="display: none"
      @change="onFileChanged"
      id="file"
    />
    <!-- 自定义提示 -->
    <div v-if="tipsText" slot="tip" class="el-upload__tip">
      {{ tipsText }}
    </div>
  </div>
</template>

<script>
import bulkUpload from "@/mixins/upload";
import { imgDomain } from "@/configs/env";

export default {
  name: "AppUploadVideo",
  mixins: [bulkUpload],
  props: {
    value: {
      type: String,
      default: () => "",
    },
    // 大小限制(MB)
    fileSize: {
      type: Number,
      default: 100,
    },
    // 提示文字
    tipsText: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      domain: imgDomain,
      file: "", // 视频文件数据
      isShowProcess: false, // 是否显示进度条
      values: "",
    };
  },
  mounted() {
    this.values = this.values;
  },
  activated() {
    this.values = this.values;
  },
  watch: {
    values(n) {
      this.values = n;
    },
  },
  methods: {
    onUploadClick() {
      this.$refs.input.click();
    },
    onDeleted() {
      this.$emit("input", "");
      this.$refs.input.value = "";
    },
    onFileChanged(event) {
      this.file = event.target.files[0];
      const isExceedSize = this.file.size / 1024 / 1024 < this.fileSize;
      if (this.file.name.indexOf(".mp4") === -1) {
        this.$message.error("请上传视频");
        return;
      }
      if (!isExceedSize) {
        this.$message.error(`上传视频大小不能超过${this.fileSize}m`);
        return;
      }
      this.upload(this.file, "oss", this.uploadCallback);
    },
    uploadCallback(data) {
      this.$emit("input", data);
      this.values = data;
    },
    // 取消上传
    onStopUploadClick() {
      if (this.ossClient) {
        this.ossClient.cancel();
      }
    },
    // 清空input值
    clearInputVlaue() {
      this.$refs.input.value = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  background: white;
  position: relative;
  line-height: 1;
  .close {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 0;
    cursor: pointer;
  }
}
.add {
  width: 100px;
  height: 100px;
  margin: 0 8px;
  cursor: pointer;
}
.demo-spin-col {
  .demo-spin-icon-load {
    animation: ani-demo-spin 1s linear infinite;
  }
}
.el-upload__tip {
  height: 30px;
  line-height: 30px;
  margin-left: 10px;
  margin-top: -2px;
}
@keyframes ani-demo-spin {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
